import React, {Component} from 'react';
// import {Image} from 'react-native';
import {
  Text,
  Container,
  Content,
  Header,
  Left,
  Right,
  Button,
  Body,
  Title,
  Form,
  Item,
  Input,
  Label
} from 'native-base';
import {addOvertime} from '../actions/overtimeAction';
import DatePicker from 'react-native-datepicker'

export default class AddOvertime extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0,
      date: new Date().format()
    }
  }

  saveOvertime() {
    const overtime = {...this.state, type: this.props.type};
    addOvertime(overtime, this.props.total,total=>{
      this.props.updateTotal(total);
      this.props.navigator.pop();
    });
  }

  onFieldChange(event) {
    this.setState({time: parseFloat(event.nativeEvent.text)});
  }

  onDateChange(date) {
    this.setState({date: date});
  }


  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent onPress={()=>this.props.navigator.pop()}>
              {/*<Icon name='arrow-back' />*/}
              <Text> 返回</Text>
            </Button>
          </Left>
          <Body>
          <Title>新增{this.props.type === 'add' ? '加班' : '补休'}</Title>
          </Body>
          <Right>
            <Button transparent onPress={this.saveOvertime.bind(this)}>
              <Text>保存</Text>
            </Button>
          </Right>
        </Header>
        <Content>
          <Form>
            <Item inlineLabel>
              <Label>{this.props.type === 'add' ? '加班' : '补休'}时间</Label>
              <Input keyboardType="numeric" onChange={this.onFieldChange.bind(this)}/>
            </Item>
            <Item inlineLabel last>
              <Label>{this.props.type === 'add' ? '加班' : '补休'}日期</Label>
              <DatePicker
                date={this.state.date}
                mode="date"
                placeholder="select date"
                format="YYYY-MM-DD"
                confirmBtnText="确定"
                cancelBtnText="取消"
                showIcon={false}
                customStyles={{dateInput:{borderWidth:0}}}
                onDateChange={this.onDateChange.bind(this)}
              />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}
